<html>
<head>
    <title>用户管理</title>
    <link href="/lib/layui/css/layui.css" rel="stylesheet"/>
</head>
<body>
<form class="layui-form" action="">
    <div class="layui-form-item" style="margin-top:15px ">
        <div class="layui-inline">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <input type="text" id="input1" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline layui-input-wrap">

                <input type="text" id="input2" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline layui-input-wrap">
                <select id="select1">
                    <option value="">所有</option>
                    <option value="0" selected>正常</option>
                    <option value="1">锁定</option>
                    <option value="-1">删除</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <input id="searchBtn" type="button" value="查询" class="layui-btn">
            <input id="addBtn" type="button" value="新增" class="layui-btn">
            <input id="delBtn" type="button" value="删除" class="layui-btn">
        </div>
    </div>
</form>

<script src="/lib/layui/layui.js"></script>
<script src="/js/common.js"></script>
<table id="table1"></table>
<!-- 弹出窗口的模板 -->
<script id="template1" type="text/html">
    <form class="layui-form" action="" lay-filter="form1">
        <div class="layui-form-item" style="margin-top:15px">
            <div class="layui-inline">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-inline">
                    <input id="username" type="text" name="username" autocomplete="off" class="layui-input">
                    <input type="hidden" name="id"/>
                </div>
            </div>
        </div>
        <div id="passworddiv" class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-inline layui-input-wrap">
                    <input id="password" type="text" name="password" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-inline layui-input-wrap">
                    <input type="text" name="name" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">头像</label>
                <div class="layui-input-inline layui-input-wrap">
                    <img id="avatarImg" width="50px" height="50px">
                    <input id="avatarInput" type="hidden" name="avatar"  autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <input type="reset" value="重置" class="layui-btn layui-btn-primary">
                <input type="button" id="saveBtn" value="保存" class="layui-btn">
            </div>
        </div>
    </form>

</script>
<!--表头编辑删除模板-->
<script id="template2" type="text/html">
    <input lay-event="edit" type="button" value="编辑" class="layui-btn layui-btn-xs">
    <input lay-event="delete" type="button" value="删除" class="layui-btn layui-btn-xs layui-bg-red">
</script>
<script th:inline="none">
    layui.use(["layer", "form", "table","upload"], function () {
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var $ = layui.jquery;
        var upload =layui.upload;


        //给多选删除按钮绑事件
        $("#delBtn").on("click",function (){
            var o = table.checkStatus("table1")
            if(o.data.length == 0){
                layer.msg("至少选中一行")
                return false;
            }
            var arr = [];
            var ids ="";
            $.each(o.data,function (index,item) {
                arr[index] = item.id
                if(ids!=""){
                    ids+=",";
                }
                ids+=item.id;
            })
            $.post("/user/delete",{ids:ids},function(){

            })
            $("#searchBtn").click();
        })

        $("#searchBtn").on("click", function () {
            table.render({
                elem: "#table1",
                cols: [[
                    {title: "选择",type:"checkbox"},
                    {title: "序号", type: "numbers"},
                    {title: "用户名", field: "username"},
                    {title: "姓名", field: "name"},
                    {title: "创建时间", field: "createTime"},
                    {title: "操作", templet: "#template2"},
                ]],
                url: "/user/list",
                where: {username: $("#input1").val(),name: $("#input2").val(),status: $("#select1").val()},
                //分页操作
                page: true,
                //每页显示多少条
                limits: [5, 10, 20],
                limit: 5
            });
        }).click();

        $("#addBtn").on("click", function () {
            layer.open({
                type: 1,
                title: "新增用户",
                area: ["400px", "400px"],
                content: $("#template1").html()//把弹出模板拿过来
            })
            upload.render({
                elem:"#avatarImg",
                url:"/attachment/upload",
                done:function (res,index,upload){
                    if(res.code===0){//上传成功，把data放进框
                        $("#avatarInput").val(res.data.filepath);
                        $("#avatarImg").attr("src",res.data.filepath);
                    }
                }
            });
        })

        $("body").on("click", "#saveBtn", function () {
            var data = form.val("form1")
            if (!data.name) {
                layer.msg("用户名不能为空!")
                return false;
            }

            $.post("/user/save", data, function () {
                layer.closeAll();
                $("#searchBtn").click();
            })
        });

        table.on("tool", function (obj) {
            var event = obj.event;
            var data = obj.data;
            if (event === "edit") {
                $.get("/user/info/" + data.id, function (user) {
                    layer.open({
                        title: "编辑用户",
                        type: 1,
                        area: ['400px', '400px'],
                        content: $("#template1").html()
                    });
                    upload.render({
                        elem:"#avatarImg",
                        url:"/attachment/uploadAdmin",
                        done:function (res,index,upload){
                            if(res.code===0){//上传成功，把data放进框
                                $("#avatarInput").val(res.data);
                                $("#avatarImg").attr("src",res.data);
                            }
                        }
                    });
                    $("#passworddiv").remove();
                    $("#username").attr("readonly", true);
                    //把对象放进form中
                    $("#avatarImg").attr("src",$("#avatarInput").val());
                    form.val("form1", user);

                })
            }

            if (event === "delete") {
                layer.confirm("您确定要删除这个用户吗?", function () {
                    //  user/delete/3 restful风格
                    $.post("/user/delete",{ids:data.id}, function () {
                        layer.closeAll();
                        $("#searchBtn").click();
                    })
                })
            }


        })


    })


</script>


</body>
</html>